<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            outline:0;
        }
        #box{
            height:100px;
            width:100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <input type="text" id="inp" value="">
    <script>
       // 表单事件 系统事件 移动端事件
       //表单事件
       //input 内容改变，就会触发
       //change 内容改变+失去焦点，触发
       //blur   失去焦点，触发
       //focus  获得焦点，触发

       //系统事件
       //scroll 滚动
       //load 监听页面渲染  页面DOM结构加载完成并且加载相关文件
       //DOMContentLoaded---jquery  监听页面渲染
       //DOMContentLoaded和load区别：DOMContentLoaded是页面DOM结构加载完成就会触发，比load触发早
       //resize 监听页面大小

       //移动端事件
    //    click 在移动端可以用，但是有300ms延迟
    //     touchmove 手指移动
    //     touchstart 手指按下
    //     touchend 手指抬起


       box.onclick=function(e){//e:event事件对象--PointerEvent
        console.log("点击1",e);
       }
       box.ontouchstart=function(e){//e:event事件对象--TouchEvent
        console.log("点击2",e);
       }
       box.ontouchmove=function(){
        console.log("移动");
       }
       box.ontouchend=function(){
        console.log("抬起");
       }

    //    let html=document.documentElement||document.body;
    //    window.onresize=function(){
    //        console.log(html.clientWidth);
    //    }

    //    inp.onblur=function(){
    //      this.style.border="1px solid blue";
    //    }

    //    inp.onfocus=function(){
    //      this.style.border="1px solid red";
    //    }

    //    inp.oninput=function(){
    //       console.log(this.value);
    //    }

    //    inp.onchange=function(){
    //       console.log(this.value);
    //    }
    </script>
</body>
</html>